<template>
<div>
<div class="page__bd">
<!-- <div class="weui-cells__title">热门城市</div>
<div class="city-list">
  <ul class="clearfix">
    <li v-for="item in hotCity">
      <router-link :to="'/index/' + item.id" class="ellipsis">
      {{item.name}}
      </router-link>
    </li>
  </ul>
</div> -->
<div class="weui-cells__title">全部城市</div>
<div class="sortgroupcity-list">
  <ul class="clearfix">
    <!-- <li v-for="(value, key, index) in sortgroupcity"> -->
    <li v-for="item in groupCity">
      <h4 class="city-title">{{item.text}}</h4>
        <ul class="groupcity-name-container clearfix">
          <li v-for="city in item.children" @click="tryJumpCity(city.text, city.value)" class="ellipsis">
              {{city.text}}
          </li>
        </ul>
    </li>
  </ul>
</div>
</div>
</div>
</template>
<script>
// import hotCity from '../../service/citiesHot'
import groupCity from 'src/service/citiesGroup'
import { mapMutations } from 'vuex'  // mapActions
export default {
  data () {
    return {
      hotCity: [],
      groupCity: {}
    }
  },
  mounted () {
    this.groupCity = groupCity.data
  },
  computed: {
    sortgroupcity () { // 将获取的数据按照A-Z字母开头排序
      let sortobj = {}
      for (let i = 65; i <= 90; i++) {
        if (this.groupCity[String.fromCharCode(i)]) {
          sortobj[String.fromCharCode(i)] = this.groupCity[String.fromCharCode(i)]
        }
      }
      return sortobj
    }
  },
  methods: {
    ...mapMutations([
      'RECORD_LOCATION' // 登陆成功后保存用户信息
    ]),
    tryJumpCity (val, id) {
      this.RECORD_LOCATION({adcode: id, city: val})
      this.$router.push('/index')
    }
  }
}
</script>
<style >
.city-list{padding:0 .05rem .05rem;}
.city-list ul li{width:25%; float:left; padding:.05rem;}
.city-list ul li a{display:block; font-size:.14rem; text-align:center; padding:.05rem; background:#fff; color:#666; border:1px solid #d8d8d8; border-radius:.05rem;}

.sortgroupcity-list > ul > li{padding-bottom:.1rem;}
.sortgroupcity-list .city-title{background:#f4f4f4; border-top:.01rem solid #d8d8d8; font-size:.14rem; color:#9a9a9a; padding:.05rem .1rem;}
.groupcity-name-container{border-top:0.01rem solid #e4e4e4; border-bottom:0.01rem solid #e4e4e4; background:#fff;}
.groupcity-name-container li{float:left; text-align:center; width:25%; height:.38rem; padding:0 .05rem; font-size:.14rem; line-height:.38rem; background:#fff; border-top:0.01rem solid #e4e4e4; border-bottom:0.01rem solid #e4e4e4; border-right:0.01rem solid #e4e4e4; margin-top:-.01rem; margin-bottom:-.01rem;}
.groupcity-name-container li:nth-of-type(4n){border-right:none;}
/*

<div class="sortgroupcity-list">
  <ul class="clearfix">
    <li v-for="(value, key, index) in groupCity">
      <h4 class="city-title">{{key}}
          <span v-if="index == 0">（按字母排序）</span>
        </h4>
        <ul class="groupcity-name-container clearfix">
          <router-link  tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id" class="ellipsis">
              {{item.name}}
          </router-link>
        </ul>
    </li>
  </ul>
</div>
*/
</style>
